//页面加载完毕执行
window.addEventListener("load", function() {
    var box = document.querySelector(".box");
    var arrowl = document.querySelector(".arrow-l");
    var arrowr = document.querySelector(".arrow-r");
    var ul = box.querySelector(".img");
    var ol = box.querySelector(".circle");
    //循环插入数量与图片一致的小球
    for (var i = 0; i < ul.children.length; i++) {
        //创建小li
        var li = this.document.createElement("li");
        //插入小li
        ol.appendChild(li);
        //记录当前的小圆圈的索引号
        li.setAttribute("index", i);
        //小圆圈排他思想 每个小li都要绑定事件
        li.addEventListener("click", function() {
            //把所有小li清楚 current
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = "";
            }
            this.className = "current";
            //点击小圆圈，移动图片，移动的是ul
            //ul的移动距离就是小圆圈的索引号*图片宽度
            var boxwidth = box.offsetWidth;
            //当点击了某个小圆圈 就拿到了当前小圆圈的索引号
            var index = this.getAttribute("index");
            //当我们点击了某个小li 就要把索引号给num
            num = index;
            circle = index;
            var target = boxwidth * index;
            animate(ul, -target, function() {

            });
        })
    }
    //鼠标经过box 显示左右按钮
    box.addEventListener("mouseover", function() {
            arrowl.style.display = "block";
            arrowr.style.display = "block";
            clearInterval(timer);
            timer = null;
        })
        //鼠标离开box 隐藏左右按钮
    box.addEventListener("mouseout", function() {
            arrowl.style.display = "none";
            arrowr.style.display = "none";
            timer = setInterval(function() {
                //手动调用点击事件
                arrowr.click();
            }, 2000);
        })
        //把ol里的第一个li设置类名为current
    ol.children[0].className = "current";
    //克隆第一张图片 放到ul最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);

    //点击右侧按钮图片滚动一张
    var num = 0;
    //控制小圆圈的播放

    var circle = 0;
    //flag 节流阀
    var flag = true;
    arrowr.addEventListener("click", function() {
        //如果如果走到了最后复制的一张照片 快速复原为第一张ul left=0
        if (flag) {
            flag = false; //关闭节流阀
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * box.offsetWidth, function() {
                flag = true; //打开节流阀
            });
            //点击右侧按钮 小圆圈跟随一起变化
            circle++;
            //如果circle=4 说明走到了我们克隆的那一张
            if (circle == ol.children.length) {
                circle = 0;
            }
            circlechange();
        }
    });

    //点击左侧按钮
    arrowl.addEventListener("click", function() {
        //如果如果走到了最后复制的一张照片 快速复原为第一张ul left=0
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * box.offsetWidth + "px";
            }
            num--;
            animate(ul, -num * box.offsetWidth, function() {
                flag = true;
            });
            //点击右侧按钮 小圆圈跟随一起变化
            circle--;
            //如果circle<=0 说明走到了我们克隆的那一张
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            circlechange();
        }
    });

    function circlechange() {
        //清楚其他小圆圈的类名
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = "";
        }
        //保留当前的小圆圈类名
        ol.children[circle].className = "current";
    }

    //自动播放轮播图
    var timer = this.setInterval(function() {
        //手动调用点击事件
        arrowr.click();
    }, 2000);
})